-
Notifications
You must be signed in to change notification settings - Fork 2.4k
Gallery page performance improvements #3289
Gallery page performance improvements #3289
Conversation
input.add( label ) | ||
.wrapAll( "<div class='ui-" + inputtype + "'></div>" ); | ||
var wrapper = document.createElement('div'); | ||
wrapper.setAttribute('class','ui-'+inputtype); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
According to quirksmode the setAttribute
implementation in ie7 is incomplete (in their test setting the style
attribute fails). Have you seen any weirdness in ie7 or wp7? In general I'm leery of stepping outside the jQuery Core abstraction.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
setAttribute works well in WP7 (tested on HTC HD7). No weirdness were found. Also I checked it in IE9 using IE7 compatibility mode. In this mode setAttribute really doesn’t work, but there are a lot of another broken things so I am not sure if IE7 is important for us. The reason I use setAttribute is Kin’s recommendation to use DOM functions instead of jQuery parent(), attrt(), etc.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We have ie 7 as A grade on our browser support page.
@toddparker, thoughts?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think in this particular case, we can use wrapper.className = 'ui-' + inputtype if setAttribute() causes problems.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Last time I tested, IE7 worked ok and is fairly important because WP7 is based on that version of IE.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@toddparker, @johnbender, I 've replaced setAttribute with wrapper.className statement. Could you please take a look? - last commit in this pull request.
Aside from the questions posted inline with the source I was wondering if you checked into the test suite for coverage of the areas that you've changed. I know the slider test coverage is mediocre and could use a bit of love. Right now the stability of many modules is riding on the strength of the "code freeze" running up to 1.0 and a lot of end user testing. That won't work in the face of an alteration like this. Test suggestions
I also wonder what others think about reverting to the DOM api here. It's clearly good for performance but there are drawbacks in terms of readability and ease of contribution. Finally, it would be HUGE if we could add perf testing pages for each of the widgets that you've altered, preferably before merging this change, so that we can track the difference here and on other platforms. You can find a sample at Other than the aforementioned I think this looks really great and I look forward to merging it in! |
I have started running unit tests. All the checkboxradio tests are passed, but many slider and selectmenu tests failed for both original and modified version. Investigating this... |
Hi John, still unable to pass the following tests:
Could you please also try to run the tests for the current (original) version - probably I run them incorrectly or there is some issue with my copy of source code. |
Created performance pages for improved controls. I was able to check that results are saved in sqlite database and they are in correct form (I used sqlite manager). I don't know why but results aren’t shown in stats/visualize pages (same behavior for already existing list-view test page, so I believe the tests are correct, but there is some misconfiguration in my side. |
I also found the reason why some slider tests failed - I used wrong way of plugging tests files. Now all the slider tests are passed, but custom selectmenu tests still fail on mobile platforms (both original and improved version). |
Now original and modified version of code pass/fail same tests. |
.first().attr( "tabindex", "0" ); | ||
item.setAttribute(dataIndexAttr,i); | ||
item.setAttribute(dataIconAttr,dataIcon); | ||
item.setAttribute('class',classes.join(" ")); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I can't recall but will this cause an issue in ie7?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Note: I'm like | | close to merging this into master.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hi @johnbender,
According to this information - http://www.quirksmode.org/dom/w3c_core.html setAttribute should work fine in IE7 except some cases when we set styles and events. I checked slider and custom selectmenu in IE9 under IE7 compatibility mode and can confirm that all attributes are applied correctly. So I will replace setting class attribute with className property like we decided for checkboxradio (will add this as part of this pull request).
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@johnbender, the improvement mentioned above has been done
Merged! I moved the perf additions over to the website repo (which is private) since we made some changes to how jquerymobile.com/test is handled. All the tests appear to be passing but there was a nasty merge conflict so it might be work going though at a couple spots: https://github.com/jquery/jquery-mobile/blob/master/js/jquery.mobile.forms.slider.js#L58 And the merge commit 480cdea#diff-2 Thanks again for all the hard work and hopefully I didn't mess anything up during the merge! |
Hi @johnbender, #2. sliderImg is now attached to ‘slider’ instead of ‘handle’. for (var i = 0, optionsCount = options.length; i < optionsCount; i++) {
var side = !i ? "b" : "a",
sliderTheme = !i ? " ui-btn-down-" + trackTheme : (" " + $.mobile.activeBtnClass),
// #1 sliderLabel isn’t used now
sliderLabel = document.createElement('div'),
sliderImg = document.createElement('span');
// #1 The Next two lines are absent now
sliderLabel.className = ['ui-slider-labelbg ui-slider-labelbg-', side, theme, " ui-btn-corner-", corners].join("");
$(sliderLabel).prependTo(slider);
sliderImg.className = ['ui-slider-label ui-slider-label-', side, sliderTheme, " ui-btn-corner-all"].join("");
sliderImg.setAttribute('role', 'img');
sliderImg.appendChild(document.createTextNode(options[i].innerHTML));
// #2 Shouldn’t it be attached to ‘handle’ instead of ‘slider’?
$(sliderImg).prependTo(slider);
} |
Interesting. The mini sliders and flip switches aren't mini anymore. Can't tell if this is the cause or if Gabriel's button stuff is it. Bitt were in play yesterday. .................................. . . . . On Feb 15, 2012, at 6:30 AM, "Sergei Grebnov" reply@reply.github.com wrote:
|
No description provided.